<template>
    <div class="app-container">
      <div class="filter-container">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <el-form-item label="手机id">
            <el-input
              v-model="listQuery.search"
              placeholder="搜素手机id"
              style="width: 220px"
              class="filter-item"
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              v-model="listQuery.content"
              placeholder="剪切版内容"
              style="width: 220px"
              class="filter-item"
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item  label="日期选择">
             <el-date-picker
              v-model="listQuery.filters2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="filter-item pickertime"
              format="yyyy-MM-dd"
              value-format="timestamp"
              :picker-options="pickerOptions"
              @change="handleFilter"
            />
          </el-form-item>
  
          <el-form-item>
        <el-button
          plain
          size="small"
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
      </el-form-item>
        <el-form-item>
        <el-button
          plain
          size="small"
          v-waves
          class="filter-item btn"
          type="primary"
          icon="el-icon-refresh"
          @click="handleCancel"
          >重置</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          plain
          size="small"
          v-waves
          class="filter-item btn"
          @click="DeleteAll"
          >删除所有内容</el-button
        >
      </el-form-item>
        </el-form>
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          align="center"
          prop="id"
          width="60"
          type="index"
        />
        <el-table-column label="手机唯一id" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.mobile_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="剪切板内容" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{row.content}}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="备注" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ time_format(row.time_) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="danger" plain size="small" @click="onDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        class="pageShow"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import { getCutList, delCutList } from "@/api/admin/admin";
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import { Message, MessageBox } from "element-ui";
  export default {
    name: "Control",
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        tableKey: 0,
        list: [],
        total: 0,
        all_total: 0,
        listLoading: true,
        acc: "",
        pwd: "",
        pri: "",
        listQuery: {
          page: 1,
          page_size: 20,
          search: "",
          content: "",
          filters2: "",
        },
        passwordType: "password",
        capsTooltip: false,
        dialogFormVisible: false,
        dialogStatus: "",
        dialogWidth: 0,
        addloading: false,
        pickerOptions: {
          disabledDate(time) {
  
            return time.getTime() > Date.now();
          },
        },
      };
    },
    created() {
      this.getList();
      this.setDialogWidth();
    },
    mounted() {},
    methods: {
      setDialogWidth() {
        const val = document.body.clientWidth;
        const def = 600; // 默认宽度
        if (val < def) {
          this.dialogWidth = "100%";
        } else {
          this.dialogWidth = def + "px";
        }
      },
      time_format(shijianchuo) {
        //shijianchuo是整数，否则要parseInt转换
        var time = new Date(parseInt(shijianchuo) * 1000);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return (
          y +
          "-" +
          this.add0(m) +
          "-" +
          this.add0(d) +
          " " +
          this.add0(h) +
          ":" +
          this.add0(mm) +
          ":" +
          this.add0(s)
        );
      },
      add0(m) {
        return m < 10 ? "0" + m : m;
      },
      getList() {
  
        this.listLoading = true;
        getCutList(this.listQuery).then((response) => {
        
          this.list = response.DATA.list;
          this.total = response.DATA.total;
          this.listLoading = false;
        });
      },
      handleFilter() {
        if (this.listQuery.filters2) {
          this.listQuery.time_start = this.listQuery.filters2[0] / 1000;
          this.listQuery.time_end = this.listQuery.filters2[1] / 1000 + 3600 * 24 - 1;
        } else {
          this.listQuery.time_start = "";
          this.listQuery.time_end = "";
        }
        // console.log(this.listQuery.time_start, this.listQuery.time_end)
        this.listQuery.page = 1;
        this.getList();
      },
      handleCancel() {
        this.listQuery.page = 1;
        this.listQuery.search = "";
        this.listQuery.content = "";
        this.listQuery.time_end = "";
        this.listQuery.time_start = "";
        this.listQuery.filters2 = ""
        this.getList();
      },
      onDelete(row) {
        MessageBox.confirm("确定删除吗", "确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delCutList({ cut_id: row.cut_id }).then((r) => {
              if (r.STATUS == 200) {
                this.getList();
                Message({
                  message: "删除成功",
                  type: "success",
                  duration: 2000,
                });
              }
            });
          })
          .catch(() => {});
      },
      DeleteAll() {
        MessageBox.confirm("确定删除所有内容吗", "确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delCutList({ del_all: "a" }).then((r) => {
              if (r.STATUS == 200) {
                this.getList();
                Message({
                  message: "删除成功",
                  type: "success",
                  duration: 2000,
                });
              }
            });
          })
          .catch(() => {});
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    user-select: none;
  }
  .push {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
  }
  .pageHidden {
    display: none;
  }
  .btn {
    margin-left: 0;
  }
  .fullwidth {
    width: 450px;
    margin-left: 50px;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .fullwidth {
      width: 100%;
      margin-left: 0;
    }
  }
  </style>
  